<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>综合分析--监管对象分析</title>
    <script src="../js/header.js"></script>
    <style>
        #piechart {
            /*width:800px;*/
            width: 100%;
            /*height: 300px;*/
            height: 248px;
            margin: 0px auto;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <el-row style="border-top: 3px solid #0D9AFF;border-bottom: 1px solid #F3F3F3;margin-bottom: 10px;">
        <el-col :span="2" class="tab-title" style="margin-left: 15px;border-left: 4px solid #0D9AFF;line-height: 1em;">
            <span style="vertical-align: middle;">数据统计</span>
        </el-col>
        <el-col :span="10" style="margin-top: 7px;">
            <span>年度:</span>
            <el-date-picker
                    v-model="fileYear"
                    type="year"
                    size="mini"
                    placeholder="请选择"
                    format="yyyy"
                    value-format="yyyy"
                    style="width: 180px;"
                    @change="changeYear">
            </el-date-picker>
        </el-col>
    </el-row>
    <el-row :gutter="20" style="overflow: hidden;margin: 0;">
        <el-col :span="12" class="echarts_wrap">
            <el-row style="border-bottom: 1px solid #ddd;">
                <el-col class="tab-title">
                    <img src="../images/quyusaomiao.png" style="vertical-align: middle;" />
                    <span style="vertical-align: middle;">监管对象区域统计</span>
                </el-col>
            </el-row>
            <el-row>
                <!--<el-col style="height: 748px;">-->
                <el-col style="height: 696px;">
                    <div id="main"></div>
                </el-col>
            </el-row>
        </el-col>
        <!--<el-col :span="12" style="padding-right: 0;height: 748px;">-->
        <el-col :span="12" style="padding-right: 0;height: 696px;">
            <el-row>
                <el-col class="echarts_wrap">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/ico_xinyon.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">监管对象信息总览</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!--<el-col style="height: 364px;">-->
                        <el-col style="height: 338px;">
                            <div id="barchart"></div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col class="echarts_wrap" style="margin-top: 10px;">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/tongji.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">监管对象信息统计</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!--<el-col id="echartswrap" style="height: 364px;">-->
                        <el-col id="echartswrap" style="height: 338px;">
                            <div id="piechart"></div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <el-dialog
            title=""
            :visible.sync="dialogTableVisible"
            center="true"
            width="45%">
        <div>
            <el-row>
                <el-col style="height: 30px;text-align: center;">{{ city.cityName }}</el-col>
                <el-col >
                    <el-col :span="12">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">总数</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">{{ city.cityCounts }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">占全国比例</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">{{ (city.cityCounts / cityTotal * 100) | numFilter  }}%</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var UIEcharts = new Vue({
        el: '#app',
        data(){
            return{
                // setHeight: `$(document.documentElement.clientHeight)`
                /*setHeight: window.innerHeight + 'px',
                setHeight2: (window.innerHeight)/2 - 57 + 'px'*/
                dialogTableVisible: false,
                city: {
                    cityName: '',
                    cityCounts: ''
                },
                cityTotal: '',
                // 饼状图宽搞获取
                initWidth: '',
                initHeight: '',
                fileYear: '',
                orgName:'',
                userName:''
            }
        },
        created: function() {
            // 获取登录用户信息
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.orgLevel = userInfo.orgLevel;
            // 中国地震局 ==> 中国, 山东省-济南市地震局 ==> 山东省-济南市
            this.orgName = userInfo.orgName.replace("地震局", "");
            this.userName=userInfo.loginName;
        },
        mounted() {
            let date=new Date();
            let year=date.getFullYear().toString();
            this.fileYear=year;
            this.calculateEcharts(); // 获取宽高

            this.mapFn();
            this.barChart();
            this.pieChart();

            this.handleListener(); // 浏览器缩放监听事件


        },
        filters: {
            numFilter (value) {
                // 截取当前数据到小数点后两位
                let realVal = parseFloat(value).toFixed(2)
                return realVal
            }
        },
        methods: {
            mapFn() {
                var dataList;
                var myChart = echarts.init(document.getElementById('main'));
                var $this = this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/object/getmapyear',
                    params:{
                        year:$this.fileYear
                    }
                })
                .then(response => {
                    let data = response.data;
                    if(data.code == 200) {
                        dataList=JSON.parse(data.dataUnit);
                        $this.cityTotal=JSON.parse(data.cityTotal);

                        option = {
                            tooltip: {
                                formatter: function(params, ticket, callback) {
                                    if(params.value){
                                        return params.seriesName + '<br/>' + params.name + ' : ' + params.value;
                                    }else{
                                        return params.seriesName + '<br/>' + params.name + ' : ' + '0';
                                    }
                                } //数据格式化
                            },
                            visualMap: {
                                min: 0,
                                max: 1500,
                                left: 'left',
                                top: 'bottom',
                                text: ['高', '低'], //取值范围的文字
                                inRange: {
                                    color: ['#e0ffff', '#006edd'] //取值范围的颜色
                                },
                                show: false //图注
                            },
                            geo: {
                                map: 'china',
                                roam: false, //不开启缩放和平移
                                zoom: 1.23, //视角缩放比例
                                label: {
                                    normal: {
                                        show: true,
                                        fontSize: '10',
                                        color: 'rgba(0,0,0,0.7)'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        borderColor: 'rgba(0, 0, 0, 0.2)'
                                    },
                                    emphasis: {
                                        areaColor: '#F3B329', //鼠标选择区域颜色
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            series: [{
                                name: '监管对象数量',
                                type: 'map',
                                geoIndex: 0,
                                data: dataList
                            }]
                        };
                        myChart.setOption(option);

                        myChart.resize();
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });

                // 地图点击事件
                myChart.on('click', function (params) {
                    $this.dialogTableVisible = true;
                    console.log(params);
                    $this.city.cityName = params.name;
                    if(params.value){
                        $this.city.cityCounts = params.value;
                    }else{
                        $this.city.cityCounts = 0;
                    }
                });
            },
            barChart() {
                var dataUnit,dataConstr;

                option = {
                    /*title: {
                        text: '世界人口总量',
                        subtext: '数据来自网络'
                    },*/
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left: 'center',
                        data: ['建设单位数量', '安评单位数量']
                    },
                    grid: {
                        left: '5%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        show: true,
                        type: 'category',
                        // data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局'],
                        name: '各局名称',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        show: true,
                        type: 'value',
                        name: '数值'
                        /* //隐藏刻度尺
                        axisTick: {
                            show: false
                        }, */
                        //隐藏坐标线
                        /* axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#000000'
                            }
                        }, */
                    },
                    series: [
                        {
                            // name: '行政强制行为信息',
                            type: 'bar',
                            itemStyle: {
                                borderWidth: {},
                                normal: {
                                    //控制柱状图颜色
                                    color: '#C1232B'

                                },
                            }
                            // data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },
                        {
                            // name: '行政检查行为信息',
                            type: 'bar',
                            itemStyle: {
                                borderWidth: {},
                                normal: {
                                    //控制柱状图颜色
                                    color: '#B5C334'

                                },
                            }
                            // data: [13203, 21489, 23034, 104170, 135744, 670230]
                        }
                    ]
                };
                var barChart = echarts.init(document.getElementById('barchart'));
                barChart.setOption(option);
                var $this=this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/object/getbaryear',
                    params:{
                        year:$this.fileYear
                    }
                }).then(response=>{
                    let data=response.data;
                    if(data.code == 200){
                        dataConstr = JSON.parse(data.dataConstr);
                        dataUnit = JSON.parse(data.dataUnit);

                        var dac = [],dau = [],xlist = [];
                        dataConstr.forEach(function(item,index){
                            dac.push(item.value);
                            xlist.push(item.name);
                        })
                        dataUnit.forEach(function(item,index){
                            dau.push(item.value);
                        })


                        barChart.setOption({
                            xAxis: {
                                data: xlist
                            },
                            series: [
                                {
                                    name: '建设单位数量',
                                    data: dac
                                },
                                {
                                    name: '安评单位数量',
                                    data: dau
                                }
                            ]
                        });
                    }
                })

                barChart.resize();
            },
            pieChart() {
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    /* 	grid: {
                            top: '10%', //距上边距
                            left: '10%', //距离左边距
                            right: '10%', //距离右边距
                            bottom: '10%', //距离下边距
                            containLabel: true
                        }, */
                    legend: {
                        orient: 'vertical',
                        y: 50,
                        left: 50,
                        // data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局']
                    },
                    series: [
                        {
                            // name: '建设单位数量',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: '60%',
                            center: ['25%', '50%'],
                            label: {
                                normal: {
                                    show: 'false',
                                    position: 'inside',
                                    formatter: '{d}%'
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    color: function (params) {
                                        //自定义颜色
                                        var colorList = [
                                            '#FACC14', '#223273', '#8543E0', '#1890FF', '#2FC25B', '#00fffe'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        },
                        {
                            // name: '安评单位数量',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: '60%',
                            center: ['75%', '50%'],
                            label: {
                                normal: {
                                    show: 'false',
                                    position: 'inside',
                                    formatter: '{d}%'
                                }
                            },
                            /*data: [
                                {
                                    value: 335,
                                    name: '北京局',
                                    selected: true
                                },
                                {
                                    value: 310,
                                    name: '天津局'
                                },
                                {
                                    value: 234,
                                    name: '河北局'
                                },
                                {
                                    value: 135,
                                    name: '山西局'
                                },
                                {
                                    value: 1548,
                                    name: '辽宁局'
                                },
                                {
                                    value: 1548,
                                    name: '内蒙古局'
                                }
                            ],*/
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal:{
                                    color:function(params) {
                                        //自定义颜色
                                        var colorList = [
                                            '#FACC14', '#223273', '#8543E0', '#1890FF', '#2FC25B','#00fffe'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        }
                    ]
                };
                var pieChart = echarts.init(document.getElementById('piechart'));
                // pieChart1.showLoading(); // 数据加载完之前先显示一段简单的loading动画
                var $this = this;

                pieChart.setOption(option);

                axios({
                    method: 'get',
                    url: appBaseUrl + '/object/getpieyear',
                    params:{
                        year:$this.fileYear
                    }
                })
                .then(response => {
                    let data = response.data;

                    if(data.code == 200) {
                        var dataList1 = JSON.parse(data.dataConstr);
                        var dataList2 = JSON.parse(data.dataUnit);
                        // pieChart1.hideLoading(); // 隐藏加载动画
                        if(dataList1!='' && dataList1!=null && dataList2!='' && dataList2!=null){
                            debugger;
                            pieChart.setOption({
                                title: {
                                    text: '监管对象信息',
                                    left: 'center',
                                    top: 10
                                },
                                series: [
                                    {
                                        name: '建设单位数量',
                                        data: dataList1, // 数据
                                    },
                                    {
                                        name: '安评单位数量',
                                        data: dataList2 // 数据
                                    }
                                ]
                            })
                        }else{
                            debugger;
                            pieChart.setOption({
                                title: {
                                    text: '监管对象信息',
                                    left: 'center',
                                    top: 10
                                },
                                series: [
                                    {
                                        name: '建设单位数量',
                                        data: [{name:this.orgName,value:0}], // 数据
                                    },
                                    {
                                        name: '安评单位数量',
                                        data: [{name:this.orgName,value:0}] // 数据
                                    }
                                ]
                            })
                        }
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });

                let resize = {
                    width: $this.initWidth,
                    height: $this.initHeight
                };

                pieChart.resize(resize);
            },
            //重新计算echarts的宽度
            calculateEcharts() {
                //获取这个组件的窗口宽度
                this.initWidth = document.getElementById('echartswrap').offsetWidth;
                this.initHeight = document.getElementById('echartswrap').offsetHeight;
            },
            changeYear() {
                this.mapFn();
                this.barChart();
                this.pieChart();
                /* return mapFn(); */
            },
            //监听窗口变化
            handleListener() {
                // 调用renderChart方法对图表进行重新渲染
                window.addEventListener('resize', this.calculateEcharts);
                window.addEventListener('resize', this.mapFn);
                window.addEventListener('resize', this.barChart);
                window.addEventListener('resize', this.pieChart);
            }
        }
    })
</script>
</html>
